<!doctype html>



  


<html class="theme-next pisces use-motion" lang="en">
<head>
  <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="William,王立敏,会打代码的扫地王大爷,wlmnzf,中科院信工所,IIE,CAS" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1" />






<meta name="description" content="一、瞎扯   最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。 二、Html5原生拖拽介绍   Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP">
<meta property="og:type" content="article">
<meta property="og:title" content="自定义表单（二）">
<meta property="og:url" content="http://csuncle.com/2017/06/11/自定义表单（二）/index.html">
<meta property="og:site_name" content="会打代码的扫地王大爷">
<meta property="og:description" content="一、瞎扯   最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。 二、Html5原生拖拽介绍   Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP">
<meta property="og:updated_time" content="2017-10-20T08:31:09.644Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="自定义表单（二）">
<meta name="twitter:description" content="一、瞎扯   最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。 二、Html5原生拖拽介绍   Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://csuncle.com/2017/06/11/自定义表单（二）/"/>





  <title>自定义表单（二） | 会打代码的扫地王大爷</title><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="en">

  





  <!-- hexo-inject:begin --><!-- hexo-inject:end --><script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?6a885c4fa76edbbfd2bea3f856135042";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>











  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">会打代码的扫地王大爷</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">CS Uncle</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            Tags
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            About
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://csuncle.com/2017/06/11/自定义表单（二）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="William Wang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/uploads/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会打代码的扫地王大爷">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">自定义表单（二）</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-11T05:57:22+08:00">
                2017-06-11
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/WebDesign/" itemprop="url" rel="index">
                    <span itemprop="name">WebDesign</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
            <!--noindex-->
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/06/11/自定义表单（二）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count hc-comment-count" data-xid="2017/06/11/自定义表单（二）/" itemprop="commentsCount"></span>
                </a>
              </span>
              <!--/noindex-->
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>一、瞎扯</p>
<p>  最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。</p>
<p>二、Html5原生拖拽介绍</p>
<p>  Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP领域，开始在制作APP的不归路上越走越远了。</p>
<p>  H5的拖拽十分好用，玩过js拖拽的人知道，在那里，拖拽的效果什么的都需要自己实现，十分地麻烦和复杂，但是在H5中都予以了封装，连移动效果都有，相当不错，简化了开发，不过事实上，对于深入学习并不利，因此想要深入理解原理的小伙伴们建议去实现一下js版本的拖拽。</p>
<p>三、HTML拖拽实现</p>
<p>  跟JS版本的原理一样，H5的拖拽也分为三个步骤，开始拖拽，拖拽时，拖拽后</p>
<p>  前提：拖拽的元素要写上draggable=”true”的标签</p>
<p>1、拖拽元素的 ondragstart，里面写的代码表示开始拖拽的时候发生的事</p>
<p>2、拖放元素所处位置的ondragover，比如拖拽一个img到div上方额，就会触发div的这个事件</p>
<p>3、拖放元素所处位置的ondrop，里面写的代码表示放置后所触发的事件</p>
<p>  很多人肯定会问，那该如何传递数据呢，这里H5也考虑到了，在这里可以通过dataTransfer来传递数据</p>
<p>四、dataTransfer的使用</p>
<p>这里借用W3CSCHOOL中的例子来说明，</p>
<pre><code>functiondragStart(ev)

{

ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id);

}
</code></pre><p>这里其实就是利用setData传递一个文本格式的参数（拖拽元素的id）</p>
<pre><code>functiondrop(ev)

{

ev.preventDefault();

vardata=ev.dataTransfer.getData(&quot;Text&quot;);

ev.target.appendChild(document.getElementById(data));

}
</code></pre><p>  这里则是通过getData来获取这个参数。大吃一惊了吧，方便到爆了。</p>
<p>  因为这个html5拖拽很简单，因此本文其实着重想讲解一下这个dataTransfer。（其实也就是官方api上抄来的而已，哈哈哈哈，不要见怪，我也不敢瞎造啊）</p>
<p>五、dataTransfer API</p>
<p><strong>Properties</strong></p>
<p>DataTransfer.dropEffect</p>
<blockquote>
<p>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.</p>
<p>获取或者设置当前被选择元素的拖拽类型，它的值必须为none、copy、link、或者move</p>
</blockquote>
<p>DataTransfer.effectAllowed</p>
<blockquote>
<p>Provides all of the types of operations that are possible. Must be one ofnone,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized.</p>
<p>提供所有可能的操作种类，必须是none,copy,copyLink,copyMove,link,linkMove,move,all或者uninitialized.中的一个。</p>
</blockquote>
<p>DataTransfer.files</p>
<blockquote>
<p>Contains a list of all the local files available on the data transfer. If the drag operation doesn’t involve dragging files, this property is an empty list.</p>
<p>包含一组可获取的本地文件列表，如果拖拽操作不包含文件，则这个文件列表将会是空的。这个属性超棒，很多拖拽上传功能就是这样子开发出来的</p>
</blockquote>
<p>DataTransfer.items    Read only</p>
<blockquote>
<p>Gives aDataTransferItemListobject which is a list of all of the drag data.</p>
<p>只读，给定一个DataTransferItemList的对象，其中包含了一个所有拖拽数据的列表。</p>
</blockquote>
<p>DataTransfer.types Read only</p>
<blockquote>
<p>An array ofstringgiving the formats that were set in thedragstartevent.</p>
<p>只读，一组字符串数组，给定了在dragstart事件中设置的一组格式。</p>
</blockquote>
<p><strong>Methods</strong></p>
<p>void dataTransfer.clearData([format]);</p>
<p>DataTransfer.clearData()</p>
<blockquote>
<p>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</p>
<p>清除给定类别的数据，type这个参数是可选的，如果类别是空或者不明确，跟所有类别相关的数据都将清除掉，如果特定类别的数据不存在，或者dataTransfer不包含数据，则这个方法将没有任何效果。</p>
</blockquote>
<p>DOM String dataTransfer.getData(format);</p>
<p>DataTransfer.getData()</p>
<blockquote>
<p>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</p>
<p>取回给定类别的数据，如果给定类别的数据不存在或者dataTransfer不包含任何数据，则将返回一个空字符串。</p>
</blockquote>
<p>DataTransfer.setData()</p>
<blockquote>
<p>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</p>
<p>设置一个给定类别的数据，如果这个类别的数据不存在，则将被添加到末尾，因此这个类别的列表的最后一项将是一个新的格式，如果这个类别已经存在，则存在的数据将被取代为这个新的数据</p>
</blockquote>
<p>void dataTransfer.setDragImage(img, xOffset, yOffset);</p>
<p>DataTransfer.setDragImage()</p>
<blockquote>
<p>Set the image to be used for dragging if a custom one is desired.      </p>
<p>设置拖拽的时候显示的图片（默认是拖拽元素的缩略图）</p>
</blockquote>
<p>六、代码</p>
<blockquote>
<p><a href="https://github.com/wlmnzf/javascript-train/tree/master/customForm" target="_blank" rel="external">https://github.com/wlmnzf/javascript-train/tree/master/customForm</a></p>
</blockquote>
<p>七、感谢</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank" rel="external">1、MDN  DataTransfer   API</a></p>
<p><a href="http://www.w3school.com.cn/html5/html_5_draganddrop.asp" target="_blank" rel="external">2.、W3CSCHOOL  HTML5拖放</a></p>
<p>3、太兴奋的时候要听伤感的歌，感谢 网易云音乐 –《岛歌》</p>

      
    </div>

    <div>
      
        
<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="/uploads/qrcode.jpg" alt="William Wang wechat" style="width: 200px; max-width: 100%;"/>
    <div>Welcome！</div>
</div>


      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>I'm happy it's useful to you!</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="/uploads/weixin.jpg" alt="William Wang WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="/uploads/qq.jpg" alt="William Wang Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/06/11/自定义表单（一）/" rel="next" title="自定义表单（一）">
                <i class="fa fa-chevron-left"></i> 自定义表单（一）
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/06/11/自定义表单（完）/" rel="prev" title="自定义表单（完）">
                自定义表单（完） <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_douban"></a>
  <a class="jiathis_button_renren"></a>
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_kaixin001"></a>
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="hypercomments_widget"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.png"
               alt="William Wang" />
          <p class="site-author-name" itemprop="name">William Wang</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">12</span>
                <span class="site-state-item-name">posts</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">14</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wlmnzf" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/wlmnzf" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1505236542" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://www.linkedin.com/in/wlmnzf" target="_blank" title="Linkedin">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  Linkedin
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">William Wang</span>
</div>


<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.1"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.1"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	

		<script type="text/javascript">
		_hcwp = window._hcwp || [];

		_hcwp.push({widget:"Bloggerstream", widget_id: 94255, selector:".hc-comment-count", label: "{\%COUNT%\}" });

		
		_hcwp.push({widget:"Stream", widget_id: 94255, xid: "2017/06/11/自定义表单（二）/"});
		

		(function() {
		if("HC_LOAD_INIT" in window)return;
		HC_LOAD_INIT = true;
		var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
		var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
		hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/94255/"+lang+"/widget.js";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hcc, s.nextSibling);
		})();
		</script>

	












  





  

  

  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!-- hexo-inject:begin --><!-- hexo-inject:end -->
  


  

  

</body>
</html>
